<!DOCTYPE html>
<html>
<head>
<script src="http://clients.viget.com/blogposts/js-as/swfobject.js" type="text/javascript"></script>
<?php echo HTML::script('application/views/scripts/raphael-2.0.js'); ?>
<script>
			var jsReady = false;
			function isReady() {
				return jsReady;
			}
			function pageInit() {
				jsReady = true;
			}
			function getFlashMovie(movieName) {
				/*
				var isIE = navigator.appName.indexOf("Microsoft") != -1;
				return (isIE) ? window[movieName] : document[movieName];
				*/
				if (window.document[movieName]){
					return window.document[movieName];
				}else if (navigator.appName.indexOf("Microsoft Internet")==-1) {
					if (document.embeds && document.embeds[movieName])
						return document.embeds[movieName];
				} else {
					return document.getElementById(movieName);
				}
			}
			function ClickRecord() {
				getFlashMovie('RecordMicrophone_Example_EI').Record();
			}
			function ClickStopRecording() {
				getFlashMovie('RecordMicrophone_Example_EI').StopRecording();
			}
			function ClickPlay() {
				getFlashMovie('RecordMicrophone_Example_EI').PlayRecording();
			}
			function ClickStopPlaying() {
				getFlashMovie('RecordMicrophone_Example_EI').StopPlaying();
			}
			function ClickSaveRecording() {
				getFlashMovie('RecordMicrophone_Example_EI').SaveRecording("http://clec.twbbs.org/clec/index.php/record/receive_sound/<?php echo $id;?>");
			}
var data="";
var paper;
var abStartDate;
var section=1,page=1;// section only ++ , page >=1
function createDraw()
{
	pageInit();
	ClickRecord();

	oldHeight=document.getElementById('presentation').offsetHeight;
	oldWidth=oldHeight*width/height;
//	pad=(document.getElementById('whole').offsetWidth-realWidth)/2;

//	document.getElementById('presentation').style.left=pad+"px";
//	document.getElementById('presentation').style.right=pad+"px";
	resizePaper();
	paper=new Raphael("presentation",realWidth,realHeight); // get width height of svg image
	paper.setViewBox(0,0,realWidth,realHeight);
	paper.canvas.style.zIndex=1;
	paper.canvas.style.height="100%";
	paper.canvas.style.width="100%";

	abStartDate=new Date();
	var startDate=0;
	//sendData("S"+section+"\n");
	data+="S"+section+"\n";
	//sendData("P"+page+"\n");
	data+="P"+page+"\n";
	//sendData("SD"+startDate+"\n");
	data+="SD"+startDate+"\nz\n";
}
var orix,oriy;
var height=<?php echo $height;?>,width=<?php echo $width;?>,pad,scaleHeight=1,scaleWidth=1,realHeight,realWidth,oldHeight,oldWidth;
function draw(evt)
{

	x=Math.round((evt.pageX-pad)*scaleWidth); // pageX standard?
	y=Math.round((evt.pageY)*scaleHeight);
	
	paper.path("M"+orix+" "+ oriy + "L" + x + " " + y);

	orix = x;
	oriy = y;
	
	data+="L"+(x/oldWidth*width)+" "+(y/oldHeight*height)+" "+ ( new Date()-abStartDate )+"\n" ;
}
function start(evt)
{
	orix = Math.round((evt.pageX-pad)*scaleWidth);
	oriy = Math.round((evt.pageY)*scaleHeight);
	plane=document.getElementById('presentation');
	
	plane.addEventListener("mousemove",draw,false);
		
	//sendData("M"+orix+" "+oriy+"\n" + (new Date()-abStartDate)+"\n" );
	data+="M"+(orix/oldWidth*width)+" "+(oriy/oldHeight*height)+" " + (new Date()-abStartDate)+"\n";
}

function end(evt)
{
	plane=document.getElementById('presentation');
	plane.removeEventListener("mousemove",draw,false);

	data+="z\n";
}
function postOp()
{
	var endDate=new Date()-abStartDate;
	//send endDate
	data+="ED"+endDate+"\n\n";
//	sendData(data);
}
var totalPage=<?php echo $img_num;?>;
function nextPage(direction)
{
	postOp();
	paper.clear();
	
	section++;
	if(direction==1 && page<totalPage)
	{
		page++;
		document.getElementById('mySVG').data="/clec/application/media/<?php echo $id;?>/" + page + ".svg";
	}
	if(direction==-1 && page>1)
	{
		page--;
		document.getElementById('mySVG').data="/clec/application/media/<?php echo $id;?>/" + page + ".svg";
	}

	var startDate=new Date()-abStartDate;
	//send section
	data+="S"+section+"\n";
	//send page
	data+="P"+page+"\n";
	//send startDate
	data+="SD"+startDate+"\nz\n";
	
}
function makeRequest(url, data)
{
	var httpRequest;
	if (window.XMLHttpRequest) {
		if (window.XMLHttpRequest) { // Mozilla, Sadari
			httpRequest = new XMLHttpRequest();
		} else if (window.ActiveXObject) { // IE
			try {
				httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
			} catch (e) {
				try {
					httpRequest = new ActiveObject("Microsoft.XMLHTTP");
				} catch (e) { }
			}
		}
	}

	if (!httpRequest) {
		return false;
	}

	httpRequest.open('POST', url);
	httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	httpRequest.send('data=' + data);
}

function sendData(data)
{
	makeRequest('<?php echo URL::site().'record/receive_points/'.$id;?>', data);
}

function resizePaper(){

	realHeight=document.getElementById('presentation').offsetHeight;
	realWidth=realHeight*width/height;
	pad=(document.getElementById('whole').offsetWidth-realWidth)/2;

	scaleHeight=oldHeight/realHeight;
	scaleWidth=oldWidth/realWidth;

	document.getElementById('presentation').style.left=pad+"px";
	document.getElementById('presentation').style.right=pad+"px";
	document.getElementById('control-panel').style.width=pad+"px";
	document.getElementById('right-panel').style.width=pad+"px";
}

function finish()
{
	postOp();
	sendData(data);
	ClickStopRecording();
	ClickSaveRecording();
}
</script>
<style type="text/css">
div{
	margin:0;
	padding:0;
}
html,body{
	height:100%;
	width:100%;
	margin:0;
	padding:0;

	border:1px solid blue;
}
#mySVG{
	position:absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	z-index:-1;
}
#whole{
	height:100%;
	width:100%;
}
#presentation{
	position:absolute;
	top:0;
	height:100%;
	left:100px;
	right:100px;

	border: 1px solid red;
	z-index:2;
}
#right-panel{
	position: absolute;
	top:0;
	right:0;
	background:#ccf;
}

#upload_target{
	display: none;
}
</style>
</head>
<body onload="createDraw()" onresize="resizePaper()">

<div id="whole">
	<div id="control-panel">
		<img src="/clec/application/views/pics/prepage.jpg" style="width:32px;" onclick="nextPage(-1)"/> 
		<img src="/clec/application/views/pics/nextpage.jpg" style="width:32px;" onclick="nextPage(1)"/>
		<img src="/clec/application/views/pics/stop.jpg" style="width:32px;" onclick="finish()"/>
	</div>


	<div id="right-panel">
		<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" style="display:;"
             id="RecordMicrophone_Example_EI" width="500" height="375"
             codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
         <param name="movie" value="/clec/application/views/scripts/RecordMicrophone_Example_EI.swf" />
         <param name="quality" value="high" />
         <param name="bgcolor" value="#869ca7" />
         <param name="allowScriptAccess" value="always" />
         <embed src="/clec/application/views/scripts/RecordMicrophone_Example_EI.swf" quality="high" bgcolor="#869ca7"
             width="500" height="375" name="RecordMicrophone_Example_EI" align="middle"
             play="true" loop="false" quality="high" allowScriptAccess="always"
             type="application/x-shockwave-flash"
             pluginspage="http://www.macromedia.com/go/getflashplayer">
         </embed>
		 </object>
	</div>

        <div id="presentation" onmousedown="start(event)" onmouseup="end(event)" >
	
        	<!--[if !IE]>-->
		<object data="/clec/application/media/<?php echo $id;?>/1.svg" type="image/svg+xml" id="mySVG" >
		<!--<![endif]-->

	        <!--[if lt IE 9]>
        	<object src="/clec/application/media/<?php echo $id;?>/1.svg" classid="image/svg+xml"
                	id="mySVG"> <![endif]-->
	        <!--[if gte IE 9]>
        	<object data="/clec/application/media/<?php echo $id;?>/1.svg" type="image/svg+xml"
                	id="mySVG"> <![endif]-->
		</object>

        </div>

</div>

</body>
</html>
